<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{
        background: #000;
    }
    #c1{
        background: #fff;
    }
    </style>
    <script>
    window.onload=function(){
        let ov=document.getElementById('v1');
        let oc=document.getElementById('c1');
        let gb=oc.getContext('2d');
        let oBtn1=document.getElementById('btn1');
        let oBtn2=document.getElementById('btn2');
        // setInterval(() => {
        //     gb.drawImage(ov ,0,0); 
        // }, 1);
        let h=oc.height;
                let w=oc.width;
        function next(){
            requestAnimationFrame(function(){
                gb.drawImage(ov ,0,0); 
                
                let imageData=gb.getImageData(0,0,w,h);
                console.log(imageData.data)


                for(let r=0;r<h;r++){
                    for(let c=0;c<w;c++){
                    let color=(imageData.data[(r*w+c)*4]+imageData.data[(r*w+c)*4+1]+imageData.data[(r*w+c)*4+2])/3;
                    imageData.data[(r*w+c)*4]=imageData.data[(r*w+c)*4+1]=imageData.data[(r*w+c)*4+2]=color;
                   
                    }
                }
                console.log(imageData.data)
                gb.putImageData(imageData,0,0)
                next();
            })
        }
        
        oBtn1.onclick=function(){
            ov.play();
            next();
        }
        oBtn2.onclick=function(){
            ov.pause();
        }
    }
    </script>
</head>
<body>
        <input type="button" value="播放" id="btn1">
        <input type="button" value="暂停" id="btn2"><br>
    <video src="./1.mp4"  controls id="v1" style="display:none"></video>
    <canvas width="544" height="960" id="c1"></canvas>

</body>
</html>